<template>
	<view>
		<view class="state-box">
			<block v-if="detail.state==1">
				<view class="state-detail">
					<image :src="url+'/applet/common/time.png'" mode="widthFix"></image>
					<view>待支付，剩余<text class="time">{{hour}}</text><text>:</text><text
							class="time">{{minute}}</text><text>:</text><text class="time">{{second}}</text></view>
				</view>
				<view class="title-name">订单即将关闭，请尽快支付</view>
			</block>
			<block v-if="detail.state==2">
				<view class="state-detail">
					<image :src="url+'/applet/common/time.png'" mode="widthFix"></image>
					<view>待接单</view>
				</view>
				<view class="title-name">还没有骑手接单，请您耐心等待</view>
			</block>
			<block v-if="detail.state==3">
				<view class="state-detail" v-if="detail.delivery_type=='express'">
					<image :src="url+'/applet/common/time.png'" mode="widthFix"></image>
					<view>配送中</view>
				</view>
				<view class="state-detail" v-if="detail.delivery_type=='pickup'">
					<image :src="url+'/applet/common/time.png'" mode="widthFix"></image>
					<view>待核销</view>
				</view>
			</block>
			<block v-if="detail.state==4">
				<view class="state-detail">
					<image :src="url+'/applet/common/dui.png'" mode="widthFix"></image>
					<view>待评价</view>
				</view>
			</block>
			<block v-if="detail.state==6">
				<view class="state-detail">
					<image :src="url+'/applet/common/dui.png'" mode="widthFix"></image>
					<view>订单已送达</view>
				</view>
			</block>
			<block v-if="detail.state==8">
				<view class="state-detail">
					<image :src="url+'/applet/common/qian.png'" mode="widthFix"></image>
					<view>退款成功</view>
				</view>
			</block>
		</view>
		<view class="ps-box" v-if="detail.delivery_type=='express'&&detail.state==3">
			<block v-if="detail.express_type==2">
				<view class="ps-title">
					<view>{{detail.status_info||''}}</view>
				</view>
				<view class="ps-call">
					<view class="ps-con" @click="call(detail.shopinfo.mobile)">
						<image :src="url+'/applet/common/dianhua.png'" mode="widthFix"></image>
						<view>联系骑手</view>
					</view>
					<view class="ps-con" @click="call(detail.shopinfo.mobile)">
						<image :src="url+'/applet/common/dianhua.png'" mode="widthFix"></image>
						<view>联系商家</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="ps-title">
					<view>{{detail.status_info||''}}</view>
				</view>
				<view class="ps-call">
					<view class="ps-con" @click="call(detail.rider_mobile)">
						<image :src="url+'/applet/common/dianhua.png'" mode="widthFix"></image>
						<view>联系骑手</view>
					</view>
					<view class="ps-con" @click="call(detail.shopinfo.mobile)">
						<image :src="url+'/applet/common/dianhua.png'" mode="widthFix"></image>
						<view>联系商家</view>
					</view>
				</view>
			</block>

		</view>
		<view class="code-box" v-if="detail.delivery_type=='pickup'&&detail.state==3">
			<view class="tt-name">核销码</view>
			<view class="tt-num">{{detail.use_code}}</view>
			<view class="code-img">
				<image :src="url+detail.use_code_image" mode="widthFix"></image>
			</view>
			<view class="twos">
				<view class="lcons">
					<view class="l1">{{detail.shopinfo.shopname}}</view>
					<view class="l2">{{detail.shopinfo.city}}{{detail.shopinfo.address}}</view>
				</view>
				<view class="rcons">
					<view class="r-imm" @click="address">
						<image :src="url+'/applet/common/daohang.png'" mode="widthFix"></image>
						<view>导航</view>
					</view>
					<view class="line"></view>
					<view class="r-imm" @click="call(detail.shopinfo.mobile)">
						<image :src="url+'/applet/common/phone.png'" mode="widthFix"></image>
						<view>电话</view>
					</view>
				</view>
			</view>
		</view>
		<view class="goods-box">
			<view class="shop-name">{{detail.shopinfo.shopname}}</view>
			<view class="list" v-for="(item,index) in detail.ordergoods">
				<image :src="item.image" mode="aspectFill"></image>
				<view class="goods-detail">
					<view class="goods-head">
						<view class="goods-name">{{item.title}}</view>
						<view class="goods-money"><text>￥</text>{{item.actual_payment}}</view>
					</view>
					<view class="goods-sku">{{item.difference}}</view>
					<view class="goods-num">X{{item.number}}</view>
				</view>
			</view>
			<view class="lists">
				<view class="t-name">优惠券</view>
				<view class="moneys"><text>￥</text>{{detail.payinfio.coupon_price}}</view>
			</view>
			<view class="foot-names">已优惠<text class="t1">￥{{detail.payinfio.coupon_price}}</text> 小计 ￥<text
					class="t2">{{detail.payinfio.actual_payment}}</text>
			</view>
		</view>
		<view class="order-detail">
			<view class="order-title">订单信息</view>
			
		
			<view class="borders"></view>
			<view class="order-two">
				<view class="order-name">订单号</view>
				<view class="order-num" @click="copy">{{detail.order_no}} | 复制</view>
			</view>
			<view class="order-two">
				<view class="order-name">下单时间</view>
				<view class="order-num">{{detail.createtime}}</view>
			</view>
			<view class="order-two">
				<view class="order-name">支付方式</view>
				<view class="order-num">微信支付</view>
			</view>
		</view>
		<view class="none"></view>
		<view class="foot" v-if="detail.state==1">
			<view class="pay" @click="pay">立即支付</view>
			<view class="default" @click="close">取消订单</view>
		</view>
		<view class="foot" v-if="detail.state==2">
			<view class="default" @click="refund">申请退款</view>
			<view class="pay" @click="call(detail.shopinfo.mobile)">联系商家</view>
		</view>
		<view class="foot" v-if="detail.state==4">
			<view class="pay" @click="evaluate">立即评价</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				state: '',
				headHeight: 0,
				app: getApp().globalData,
				url: getApp().globalData.baseurl,
				detail: {},
				hour: '00',
				minute: '00',
				second: '00',
				endTime: 0,
				timer: null,
				id: ''
			}
		},
		onLoad(e) {
			this.id = e.id
			this.headHeight = (uni.getSystemInfoSync().statusBarHeight + 55) * 2
			this.app.post('/api/order/order_info', {
				id: e.id,
			}).then(res => {
				console.log(res)
				this.detail = res;
				if (res.state == 1) {
					this.endTime = parseInt(res.payendtime) * 1000; // 转换为毫秒
					this.startCountdown();
				}
			})
		},
		onUnload() {
			// 页面卸载时清除定时器
			clearInterval(this.timer);
		},
		methods: {
			evaluate() {
				uni.navigateTo({
					url: '/pages/sc/evaluate/evaluate?id=' + this.id
				})
			},
			address() {
				uni.openLocation({
					latitude: Number(this.detail.shopinfo.latitude),
					longitude: Number(this.detail.shopinfo.longitude),
					scale: 18,
					name: this.detail.shopinfo.shopname,
					address: this.detail.shopinfo.address,
					fail: (res) => {
						console.log(res)
					}
				})
			},
			call(tel) {
				console.log(tel)
				uni.makePhoneCall({
					phoneNumber: String(tel)
				});
			},
			startCountdown() {
				this.timer = setInterval(() => {
					const now = Date.now(); // 当前时间（毫秒）
					const remainingTime = this.endTime - now; // 剩余时间（毫秒）

					if (remainingTime <= 0) {
						// 倒计时结束
						this.countdownText = "00:00:00";
						clearInterval(this.timer); // 清除定时器
						console.log("倒计时结束");
						return;
					}

					// 格式化剩余时间为 "时:分:秒"
					const hours = Math.floor(remainingTime / (1000 * 60 * 60));
					const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
					const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
					this.hour = this.padZero(hours)
					this.minute = this.padZero(minutes)
					this.second = this.padZero(seconds)

				}, 1000);
			},
			padZero(num) {
				// 补零函数，确保数字始终为两位
				return num < 10 ? `0${num}` : num;
			},
			result(state) {
				uni.navigateTo({
					url: '/pages/result/result'
				})
			},
			again() {
				uni.navigateTo({
					url: '/pages/sc/shaopIndex/shaopIndex?id=' + this.detail.id
				})
			},
			refund() {
				uni.navigateTo({
					url: '/pages/sc/refund/refund?id=' + this.id
				})
			},
			copy() {
				console.log(123)
				uni.setClipboardData({
					data: this.detail.order_no,
					success: () => {
						uni.showToast({
							icon: 'none',
							title: '复制成功'
						});
					},
					fail(res) {
						console.log(res)
					}
				});
			},
			pay() {
				this.app.post('/api/order/pay_order', {
					order_sn: this.detail.order_no,
				}).then(res => {
					console.log(res)
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.pay_param.timeStamp,
						nonceStr: res.pay_param.nonceStr,
						package: res.pay_param.package,
						signType: res.pay_param.signType,
						paySign: res.pay_param.paySign,
						success: (res) => {
							console.log('success:' + res);
							uni.showToast({
								title: '支付成功',
								icon: "none"
							})
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/voucherPage'
								})
							}, 1500)
						},
						fail: (err) => {
							console.log('fail:' + err);
							uni.showToast({
								title: '取消支付',
								icon: "none"
							})
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/voucherPage'
								})
							}, 1500)
						}
					});
				})
			},
			close() {
				this.app.post('/api/order/cancel_order', {
					id: this.id,
				}).then(res => {
					console.log(res.data)
					uni.showToast({
						title: '已取消',
						icon: "none"
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/voucherPage'
						})
					}, 1500)
				})
			},
		}
	}
</script>

<style lang="scss">


	.ps-box {
		width: 690rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 30rpx 0;
		margin-top: 30rpx;
		margin-left: 30rpx;

		.ps-title {
			font-size: 30rpx;
			color: #333333;
			margin-left: 30rpx;
			view{
				font-size: 34rpx;
				font-weight: bold;
			}
		}

		.ps-two {
			margin-top: 20rpx;
			width: 630rpx;
			margin-left: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.ps-time {
				font-size: 30rpx;
				color: #333333;

				text {
					color: #84BD00;
				}
			}

			.ps-km {
				font-size: 30rpx;
				color: #333333;
			}
		}

		.ps-call {
			margin-top: 30rpx;
			width: 630rpx;
			margin-left: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 30rpx;
			border-top: 1px solid #eee;

			.ps-con {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				view {
					font-size: 30rpx;
					color: #333333;
					margin-left: 12rpx;
				}
			}
		}
	}

	.code-box {
		width: 690rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 30rpx 0;
		margin-top: 30rpx;
		margin-left: 30rpx;

		.tt-name {
			width: 630rpx;
			margin-left: 30rpx;
			font-size: 30rpx;
			color: #333333;
		}

		.tt-num {
			width: 630rpx;
			margin-left: 30rpx;
			font-size: 30rpx;
			color: #333333;
			text-align: center;
			font-weight: bold;
		}

		.code-img {
			width: 630rpx;
			margin-left: 30rpx;
			display: flex;
			justify-content: center;
			padding-top: 24rpx;
			padding-bottom: 30rpx;

			image {
				width: 222rpx;
				height: 222rpx;
			}
		}

		.twos {
			width: 630rpx;
			margin-left: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 1px solid #eee;
			padding-top: 30rpx;

			.lcons {
				.l1 {
					font-size: 30rpx;
					color: #333333;
				}

				.l2 {
					font-size: 24rpx;
					color: #999999;
					margin-top: 18rpx;
				}
			}

			.rcons {
				display: flex;
				align-items: center;

				.line {
					width: 1px;
					height: 68rpx;
					border-left: 1px solid #D8D8D8;
					margin-left: 20rpx;
					margin-right: 20rpx;
				}

				.r-imm {
					width: 50rpx;

					image {
						width: 50rpx;
						height: 50rpx;
					}

					view {
						width: 50rpx;
						text-align: center;
						font-size: 22rpx;
						color: #9E9E9E;
					}
				}
			}
		}
	}

	.bg-img {
		width: 750rpx;
		position: fixed;
		top: 0;
	}

	.state-box {
		width: 690rpx;
		margin-left: 30rpx;
		position: relative;
		margin-top: 30rpx;

		.state-detail {
			display: flex;
			align-items: center;

			image {
				width: 50rpx;
				height: 50rpx;
			}

			view {
				font-size: 36rpx;
				color: #333333;
				margin-left: 18rpx;

				.time {
					padding: 10rpx;
					background-color: #CDF7D7;
					color: #34AD7A;
					font-size: 36rpx;
					margin-left: 14rpx;
					margin-right: 14rpx;
					border-radius: 10rpx;
				}

				text {
					color: #34AD7A;
				}
			}
		}

		.title-name {
			font-size: 30rpx;
			color: #999999;
			margin-top: 10rpx;
		}
	}

	.box-white {
		width: 690rpx;
		background-color: #FFFFFF;
		position: relative;
		margin-left: 30rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		margin-top: 30rpx;

		.details {
			margin-left: 30rpx;

			.title {
				font-size: 30rpx;
				color: #333333;
			}

			.name {
				font-size: 24rpx;
				color: #999999;
				margin-top: 14rpx;
			}
		}

		.money {
			font-size: 40rpx;
			color: #F5A73B;
			font-weight: bold;
			margin-right: 30rpx;

			text {
				font-size: 30rpx;
				font-weight: 400;
			}
		}
	}

	.order-detail {
		width: 690rpx;
		background-color: #FFFFFF;
		position: relative;
		margin-top: 30rpx;
		margin-left: 30rpx;
		border-radius: 10rpx;
		padding: 30rpx 0;

		.order-title {
			font-size: 30rpx;
			color: #333333;
			margin-left: 30rpx;
		}

		.borders {
			width: 630rpx;
			margin-left: 30rpx;
			border-top: 1px solid #eee;
			margin-top: 30rpx;
		}

		.order-two {
			width: 630rpx;
			margin-left: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;

			.order-name {
				font-size: 30rpx;
				color: #999999;
			}

			.order-num {
				width: 500rpx;
				font-size: 30rpx;
				text-align: right;
				color: #333333;
			}
		}
	}

	.alert-box {
		width: 690rpx;
		background-color: #FFFFFF;
		position: relative;
		margin-top: 30rpx;
		margin-left: 30rpx;
		border-radius: 10rpx;
		padding: 30rpx 0;

		.alert-title {
			margin-left: 30rpx;
			font-size: 30rpx;
			color: #333333;
		}

		.alert-con {
			width: 630rpx;
			margin-left: 30rpx;
			font-size: 30rpx;
			color: #999999;
			margin-top: 30rpx;
		}
	}

	.foot {
		width: 750rpx;
		height: 120rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;

		.pay {
			width: 230rpx;
			height: 80rpx;
			font-size: 30rpx;
			background-color: #84BD00;
			color: #FFFFFF;
			border-radius: 10rpx;
			margin-right: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.default {
			width: 230rpx;
			height: 80rpx;
			font-size: 30rpx;
			border: 1px solid #DBDBDB;
			color: #FFFFFF;
			border-radius: 10rpx;
			margin-right: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #333333;
			box-sizing: border-box;
		}
	}

	.goods-box {
		width: 690rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 30rpx;
		margin-left: 30rpx;

		.shop-name {
			font-size: 26rpx;
			color: #333333;
			margin-left: 30rpx;
			padding: 30rpx 0;
		}

		.list {
			width: 630rpx;
			margin-left: 30rpx;
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 16rpx;
			}

			.goods-detail {
				width: 484rpx;
				height: 120rpx;
				display: flex;
				align-content: space-between;
				flex-wrap: wrap;
				margin-left: 26rpx;

				.goods-head {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.goods-name {
						font-size: 26rpx;
						color: #333333;
					}

					.goods-money {
						font-size: 36rpx;
						color: #333333;

						text {
							font-size: 26rpx;
						}
					}
				}

				.goods-sku {
					width: 100%;
					font-size: 26rpx;
					color: #999999;
				}

				.goods-num {
					font-size: 32rpx;
					color: #999999;
				}
			}
		}

		.lists {
			width: 630rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-left: 30rpx;
			margin-bottom: 30rpx;

			.t-name {
				font-size: 26rpx;
				color: #333333;
			}

			.moneys {
				font-size: 36rpx;
				color: #333333;

				text {
					font-size: 26rpx;
				}
			}

			.red {
				background: #FF0000;
				border-radius: 50rpx;
				display: flex;
				align-items: center;
				padding: 4rpx 10rpx;

				view {
					font-size: 22rpx;
					color: #FFFFFF;
				}

				image {
					width: 20rpx;
					height: 20rpx;
					margin-top: 6rpx;
				}
			}
		}

		.foot-names {
			border-top: 1px solid #D8D8D8;
			width: 630rpx;
			margin-left: 30rpx;
			text-align: right;
			line-height: 102rpx;
			font-size: 30rpx;

			.t1 {
				color: #FF0000;
				margin-right: 20rpx;
			}
		}
	}

	.none {
		width: 750rpx;
		height: 150rpx;
	}
</style>